<html>
<head>
<style>
@page {
  size: 400px 1100px;
  margin: 10px;
}
body {
  margin: 10px;
  max-width: 360px;
}
#one {
  height: 200px;
  background-image: url(../../demos/images/cc0-cat.png), url(../../demos/images/flyingsaucer.png), none;
  background-repeat: no-repeat;
  border: 1px solid blue;
}
#two {
  height: 100px;
  border: 1px solid red;
  background-image: inherit;
}
#three {
  border: 1px solid purple;
  height: 100px;
  background-image: url(../../demos/images/cc0-cat.png), url(../../demos/images/flyingsaucer.png);
  background-repeat: no-repeat;
  background-position: right, 25% bottom;
}
#four {
  border: 1px solid orange;
  height: 100px;
  background-repeat: no-repeat;
  background-image: url(../../demos/images/cc0-cat.png), linear-gradient(to top, red, blue);
  background-position: 20% top;
}
#five {
  border: 1px solid pink;
  height: 200px;
  background-image: url(../../demos/images/cc0-cat.png), url(../../demos/images/flyingsaucer.png), none;
  background-repeat: no-repeat, repeat-y;
  background-position: right;
  background-attachment: scroll;
}
#six {
  border: 1px solid green;
  height: 200px;
  background-image: url(../../demos/images/cc0-cat.png), url(../../demos/images/flyingsaucer.png), none;
  background-repeat: no-repeat;
  background-position: left, right;
  background-attachment: scroll;
  background-size: cover, 25% 70%;
}
#seven {
  border: 1px solid black;
  height: 150px;
  background: gray url(../../demos/images/cc0-cat.png) center bottom no-repeat;
}
</style>
</head>
<body>
<div id="one">
  <div id="two"></div>
</div>

<div id="three"></div>

<div id="four"></div>

<div id="five"></div>

<div id="six"></div>

<div id="seven"></div>

</body>
</html>
